
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:qyou_app/common/base.dart';

class ShopCarouselPage extends StatelessWidget with Base {
  List picList = [
    "https://wimg.588ku.com/gif620/20/12/03/8b2476c21e0fb0bad0eab4b004c2ada2.gif",
    "https://wimg.588ku.com/gif620/20/12/07/6e391bbd08c56118cb018b24962a09cd.gif",
    "https://wimg.588ku.com/gif620/20/12/03/70da9ffc3e416f90435597acfcfe61de.gif",
    "https://wimg.588ku.com/gif620/20/12/10/49fd06309d2bcc613fac346ed6ff0c33.gif",
    "https://wimg.588ku.com/gif620/21/05/08/c438fe3cf3dbf8e4ad86f304efaceaae.gif",
    "https://wimg.588ku.com/gif620/21/05/08/7fc5dd41f7a1afa33f886d12a18df441.gif",
    "https://wimg.588ku.com/gif620/21/05/12/dbbe48526d31438c28cf1fa5bb60d14c.gif",
    "https://wimg.588ku.com/gif620/21/05/12/1aa1488bee36f376aaf56bef57950c93.gif",

    "https://wimg.588ku.com/gif620/20/12/02/556a84e179bfc7d0fbe0df2f41e5708d.gif",
    "https://wimg.588ku.com/gif620/20/12/03/3a882917b299cf91f7c886f5e224e3a5.gif",
    "https://wimg.588ku.com/gif620/20/12/02/ef3680fb945c1c3e23d590e217e5ccca.gif",
    "https://wimg.588ku.com/gif620/20/12/04/e07af0bce3289546b55d0f6555064624.gif",
    "https://wimg.588ku.com/gif620/21/06/20/5fb04ef277da0f4449029245cb38d651.gif",
    "https://wimg.588ku.com/gif620/20/12/19/5af1480b8d07e4178ce223848c8b6d84.gif",
    "https://wimg.588ku.com/gif620/21/04/06/d787e01a37cb4df324d8f25bf35569c3.gif",
    "https://wimg.588ku.com/gif620/20/12/08/f8fd657c1ea687c07a6a5ab675f32faf.gif",
    "https://wimg.588ku.com/gif620/21/06/25/eb314c8e17a5faf7d54773970d294c81.gif",
    "https://wimg.588ku.com/gif620/20/08/28/e411dc8ce56e3b4881ea84897b4134ac.gif",
    "https://wimg.588ku.com/gif620/20/11/27/31809d22870d6e22af70e54b09ec9751.gif",
    "https://wimg.588ku.com/gif620/20/12/07/9ecb124b5230ea8191db0999ac00e3af.gif",
  ];
  List nameList = [
    "扇子",
    "古筝",
    "琵琶",
    "竖琴",
    "笛子",
    "胡鼓",
    "古籍",
    "书画",
    "瑜伽",
    "风起霓裳",
    "面膜",
    "脂粉",
    "歌舞",
    "花卉",
    "春游",
    "彩妆",
    "云雾绿树",
    "邮寄",
    "水墨古装",
    "胡舞",
  ];

  Widget _waitShopCarouselData(pics) {
    if (pics == null) {
      return Image.asset(
        'assets/common/null.png',
      );
    } else if (pics.length > 0) {
      return ConstrainedBox(
          child: Swiper(
            outer: false,
            itemBuilder: (context, index) {
              return Wrap(
                alignment: WrapAlignment.center,
                runSpacing: dp(10),
                spacing: dp(10),
                children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) {
                  return SizedBox(
                    child: Column(
                      children: <Widget>[
                        ClipRRect(
                          borderRadius: BorderRadius.all(
                            Radius.circular(dp(12)),
                          ),
                          child: Image.network(
                            index == 0 ? picList[i] : picList[i+9],
                            //"https://i0.hdslb.com/bfs/live/28de8dd050a9f05a0c1799f35177c31799ef4019.jpg@320w_330h_1c_100q.webp",
                            width: dp(60),
                            height: dp(60),
                            fit: BoxFit.fill,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: dp(6)),
                          child: Text(
                            index == 0 ? nameList[i] : nameList[i+9],
                            style: TextStyle(fontSize: dp(10)),
                            overflow: TextOverflow.ellipsis,
                          ),
                        )
                      ],
                    ),
                  );
                }).toList(),
              );
            },
            pagination: SwiperPagination(
              margin: EdgeInsets.all(dp(2)),
              builder: DotSwiperPaginationBuilder(
                size: dp(5),
                activeSize: dp(5),
                color: Colors.grey,
                activeColor: Colors.red,
              ),
            ),
            scrollDirection: Axis.horizontal,
            autoplay: true,
            itemCount: (pics.length ~/ 10) + 1,
          ),
          constraints: BoxConstraints.loose(Size(dp(350), dp(185))));
    }

    return null;
  }

  @override
  Widget build(BuildContext context) {
    List pics = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
    return Padding(
      padding: EdgeInsets.all(dp(10)),
      child: Container(
        padding: EdgeInsets.all(5),
//        color: Colors.amberAccent,
        child: _waitShopCarouselData(pics),
      ),
    );
  }
}
